// 自定义hooks

import { RootState } from '@/types/store';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// 通过泛型函数，才会把状态推断直接联系起来
export const useInitialState = <StateName extends keyof RootState>(
  action: () => void,
  stateName: StateName
) => {
  // 创建 dispatch
  const dispatch = useDispatch();

  // 请求数据
  useEffect(() => {
    // 分发action
    dispatch(action());
  }, [dispatch]);

  return useSelector((state: RootState) => state[stateName]);
};

// export const useInitialState = (
//   action: () => void,
//   // 把里面可能的属性，拿出来分别去 推断 state[stateName] 的类型然后联合起来
//   // (alias) useInitialState(action: () => void, stateName: "login" | "user" | typeof $CombinedState):
//   //  Token | UserState | undefined
//   // 这不是我们想要的结果
//   stateName: keyof RootState
// ) => {
//   // 创建 dispatch
//   const dispatch = useDispatch();

//   // 请求数据
//   useEffect(() => {
//     // 分发action
//     dispatch(action());
//   }, [dispatch]);

//   return useSelector((state: RootState) => state[stateName]);
// };
